import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'

export default class Item extends Component {
  state = {
    mouseEnter: false
  }
  // 对接收的props进行类型及必要性的限制
  static propTyoes = {
    updateTodo: PropTypes.func.isRequired,
    deleteTodo: PropTypes.func.isRequired,
  }
  handleMouse = (state) => {
    return () => {
      this.setState({
        mouseEnter: state
      })
    }
  }
  handleChecked = (id) => {
    return event => {
      this.props.updateTodo(id,event.target.checked)
    }
  }
  handleDelete = (id) => {
    if(window.confirm('确定删除？'))
    this.props.deleteTodo(id)
  }
  
  render() {
    let {id,name, done} = this.props
    let { mouseEnter } = this.state
    return (
      <li style={{background: mouseEnter? '#ccc':''}} onMouseEnter={this.handleMouse(true)}
      onMouseLeave={this.handleMouse(false)}>
        <div className='labels'>
            <input type="checkbox" checked={done} onChange={this.handleChecked(id)}/>
            <span>{name}</span>
        </div>
        <button className="btn btn-danger" style={{display:mouseEnter? 'block':'none'}} onClick={() => this.handleDelete(id)}>删除</button>
      </li>
    )
  }
}
